import React, { useState, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, Modal } from "react-native";
import { Button, Icon, Input } from "@rneui/themed";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ReplaceModal = () => {

    const { modalVisible, setModalVisible, handlePressChange } = useContext(CommonContext)
    const [inputValue, setInputValue] = useState()

    const handlePressColse = () => {
        setModalVisible(false)
    }

    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
        >
            <View style={styles.container}>
                <View style={styles.backContent}></View>
                <View style={styles.bodyContent}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 * ratio }}>
                        <Text style={styles.title1}>Replace mnemonics</Text>
                        <Icon type="antdesign" name="close" size={20} color='#707070'
                            style={{ marginRight: 17 * ratio }} onPress={handlePressColse} />
                    </View>
                    <View style={styles.divider}></View>
                    <Input style={styles.input}
                        inputStyle={styles.title2}
                        value={inputValue}
                        placeholder='Please enter a new word to replace the old one'
                        onChangeText={(value) => setInputValue(value)} />
                    <View style={{ alignItems: 'center' }}>
                        <Button buttonStyle={{ ...styles.button }} onPress={() => handlePressChange(inputValue)}>
                            <Text style={styles.title3}>Save</Text>
                        </Button>
                    </View>
                </View>
            </View>
        </Modal >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    backContent: {
        flex: 1,
        backgroundColor: '#000000',
        opacity: 0.34
    },
    bodyContent: {
        width: width,
        height: 225 * ratio,
        backgroundColor: '#FFFFFF'
    },
    title1: {
        fontSize: 16,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        lineHeight: 21,
        color: '#262626',
        marginLeft: 19 * ratio
    },
    title2: {
        fontSize: 11,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        lineHeight: 15,
        color: '#2C2C2C'
    },
    title3: {
        fontSize: 18,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        lineHeight: 24,
        color: '#FFFFFF'
    },
    divider: {
        width: width,
        height: 0,
        borderColor: '#E9E8E8',
        borderWidth: 1,
        marginTop: 16 * ratio
    },
    input: {
        width: 337 * ratio,
        height: 22 * ratio,
        marginTop: 32 * ratio
    },
    button: {
        width: 288 * ratio,
        height: 43 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 5
    }
})
export default ReplaceModal